<template>
	<div class="container">
		
		<div class="table">
			<template>
				<el-table :data="tableData" stripe style="width: 100%" :header-cell-style="headClass"
					:cell-style="rowClass" :default-sort="{prop: 'recordTime', order: 'ascending'}">
					<el-table-column prop="hostip" label="IP">
					</el-table-column>
					<el-table-column prop="loss" label="丢包">
					</el-table-column>
					<el-table-column prop="send" label="发送">
					</el-table-column>
					<el-table-column prop="lossper" label="丢包率">
						<template slot-scope="scope">
							{{scope.row.lossper}}%
						</template>
					</el-table-column>
					<el-table-column prop="receive" label="接收">
					</el-table-column>
					<el-table-column prop="recordTime" label="采集时间">
					</el-table-column>
					<el-table-column label="操作" prop="result">
						<template slot-scope="scope">
							<el-button type="primary" @click="see(scope.row.result)">查看详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<el-dialog title="详情" :visible.sync="dialogTableVisible">
			<div style="white-space: pre-line;" v-html="result">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getJavaServerData,
		postJavaServerData,
		getData
	} from "@/api/index.js";
	export default {
		created() {
			this.getTableData()
		},
		data() {
			return {
				tableData:[],
				result:'',
				dialogTableVisible:false,
			};
		},
		methods: {
			see(res){
				this.dialogTableVisible = true
				this.result = res
			},
			async getTableData(){
				let res = await getData('/Sp/Networktopoalert')
				console.log(res)
				this.tableData = res
			},
			headClass() { //表头居中显示
				return "text-align:center;font-size:14px;color:black"
			},
			rowClass() { //表格数据居中显示
				return "text-align:center"
			}
		},
	};
</script>

<style lang="scss" scoped>
	::v-deep .el-table__body tr,
	::v-deep .el-table__body td {
		padding: 0;
		height: 50px;
		font-size: 12px;
	}

	.redBox {
		width: 50px;
		height: 25px;
		background-color: red;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		color: ghostwhite;
	}

	.selectBox {
		width: 300px;
		height: 50px;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 10px;
	}

	.greenBox {
		width: 50px;
		height: 25px;
		background-color: seagreen;
		border-radius: 5px;
		text-align: center;
		line-height: 25px;
		color: ghostwhite;
	}
</style>
